<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 300px;
				height: 500px;
				position: relative;
				margin: 100px auto 0;
				border: 10px solid black;
				overflow: hidden;
			}

			#content {
				width: 1200px;
				height: 100%;
				position: absolute;
			}

			img {
				float: left;
				width: 300px;
				height: 100%;
				box-sizing: border-box;
				/*padding: 10px;*/
				border: 10px ridge cyan;
			}

			#control {
				height: 15px;
				position: absolute;
				bottom: 30px;
				width: 100%;
				/*background-color: yellow;*/
				text-align: center;
				font-size: 0;
			}

			#control * {
				display: inline-block;
			}

			#control div {
				background-color: white;
				height: 15px;
				width: 40px;
				margin: 0 10px;
				text-align: left;
			}

			#control span {
				width: 0;
				height: 100%;
				background-color: red;
			}


		</style>
	</head>
	<body>

		<div id="box">
			<div id="content">
				<img src="img/1.jpg" alt="">
				<img src="img/2.jpg" alt="">
				<img src="img/3.jpg" alt="">
				<img src="img/1.jpg" alt="">
			</div>
			<div id="control">
				<div><span></span></div>
				<div><span></span></div>
				<div><span></span></div>
			</div>
		</div>
		
	</body>
</html>
<script>
	// 轮播图对象
	var lunboObj = {
		// key(键): value(值)
		// 存储当前位置的变量
		left: 0,
		// 轮播图的位置(第几张图)
		index: 0,
		// contentDiv
		contentDiv: document.getElementById('content'),

		// 存放span的数组
		spanArr: document.querySelectorAll('#control span'),

		// 进度条动画定时器
		timerP: null,

		// 进度条当前的宽度
		pW: 0,

		// 轮播图定时器
		timerLB: null,

		// 进度条动画
		timerPAnimation: function() {

			// 存储下this的值
			var _this = this;

			// console.log(this);
			// 这里面的this代表lunboObj
			_this.timerP = setInterval(function() {

				// 改变进度条变量的值
				_this.pW += 2;

				// 注意这里的this已经不是lunboObj
				// console.log(this);
				var curSpan = _this.spanArr[_this.index];
				
				// 改变真实的span标签的宽度
				curSpan.style.width = _this.pW + 'px';

				if (_this.pW == 40) {

					// 清除进度条定时器
					clearInterval(_this.timerP);

					_this.pW = 0;
					// curSpan.style.width = 0;

					// 走轮播图动画
					_this.timerLBAnimation();
				}


			}, 50);

		},

		// 轮播图动画
		timerLBAnimation: timerLBAnimation,

		// 清除当前进度条的颜色
		clearColor: clearColor

	};


	// 清除当前进度条的颜色
	function clearColor() {
		// 获取当前的span
		var curSpan = this.spanArr[this.index];
		curSpan.style.width = 0;
	}


	// 轮播图动画函数
	function timerLBAnimation() {

		var _this = this;
		_this.timerLB = setInterval(function() {

			// 改变left的值
			_this.left -= 3;

			// 改变contentDiv的left
			_this.contentDiv.style.left = _this.left + 'px';

			// 走完一张停止
			if (_this.left % 300 == 0) {

				// 把span的宽度清零
				_this.clearColor();


				// 停止轮播图动画
				clearInterval(_this.timerLB);

				// 索引自增1
				_this.index++;

				// 最后一张
				if (_this.index == 3) {
					// 切换到第一张
					_this.index = 0;
					_this.left = 0;
					_this.contentDiv.style.left = 0;

				}

				// 停留两秒后继续执行进度条动画
				setTimeout(function() {
					_this.timerPAnimation();
				}, 2000);
			}


		}, 10);

	}

	lunboObj.timerPAnimation();









</script>





